
<!-- 商城首页 -->
<template>
  <div class="mall-index">
    <van-nav-bar fixed title="商品列表" safe-area-inset-top>
      <template #left>
        <img style="width: 30px; margin-right: 10px" src="../../assets/images/返回2.png" @click="() => $router.go(-1)"
          alt="" />

      </template>
    </van-nav-bar>
    <van-search v-model="goodsname" show-action placeholder="请输入搜索关键词" @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <div>
      <div style="width:100%">
        <van-dropdown-menu>
          <van-dropdown-item v-model="search.order" :options="option1" @change="onchange" />
        </van-dropdown-menu>
      </div>

    </div>


    <div class="list">


      <van-grid :gutter="10" column-num="2" icon-size="140px">
        <van-grid-item @click="goitem(value)" style="border-radius: 15px !important; border: none"
          v-for="value in goods" :key="value" :icon="value.imgurl">
          <template #text>
            <div class="text">
              <p>{{value.goods_name}}</p>
              <span>￥</span> <span>{{value.goods_price}}</span>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>

import { cateList } from "../../api/cate";
import { goodsList } from "../../api/goods";
export default {
  name: "",
  data() {
    return {
      keys: "",
      list: [
        {
          id: 1,
          img: require("../../assets/images/mall/商城首页01.png"),
          name: "饲料",
        },
        {
          id: 2,
          img: require("../../assets/images/mall/商城首页02.png"),
          name: "药品",
        },
        {
          id: 3,
          img: require("../../assets/images/mall/商城首页03.png"),
          name: "器材",
        },
        {
          id: 4,
          img: require("../../assets/images/mall/商城首页04.png"),
          name: "虾苗",
        },
        {
          id: 5,
          img: require("../../assets/images/mall/商城首页05.png"),
          name: "场域",
        },
      ],
      goods: [],
      search: {
        goodsname: "",
        bigtypeid: "",
        page: 1,
        rows: 100,
        order: 0,
      },
      goodsname: "",
      option1: [
        { text: '全部商品', value: 0 },
        { text: '价格/由高到低', value: 1 },
        { text: '价格/由低到高', value: 2 },
      ],
      
    };
  },
  methods: {
    onSearch() {
      this.getData();
    },
    goitem(uitem) {
      this.$router.push({ path: "/goods-details", query: { id: uitem.id } });
    },
    ruzhu() {

      this.$router.push({ path: "/add-business", query: {} });

    },
    goodadd() {
      this.$router.push({ path: "/add-goods", query: {} });
    },
    async init() {
      let cate = await cateList();
      if (cate.status == 200) {
        this.list = cate.data;
      }
    },
    async getData() {

      this.search.goods_name = this.goodsname;
      let res = await goodsList(this.search);
      if (res.status == 200) {
        this.goods = res.data;
      }
    },
    async onchange(e){
      console.log("typeChange");
      this.getData();
    }
  },
  computed: {},
  watch: {},
  created() {
    this.search.bigtypeid = this.$route.query.bigtypeid;
    this.search.typeid = this.$route.query.typeid;
    this.search.goods_name = this.$route.query.keys;

    this.init();
    this.getData();
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
:deep(.van-grid-item__content) {
  border-radius: 25px;
  overflow: hidden;
  background: none;
}

:deep(.van-search__content) {
  background: rgba($color: #fff, $alpha: 0.5);
}

:deep(.van-grid-item__content--surround) {
  background-color: #fff;
}

.mall-index {
  width: 100%;
  padding-top: 95px;

  .top {
    width: 100%;
    height: 300px;
    background: url("../../assets/images/图0-1.png") no-repeat center center;
    background-size: 100% 100%;
    border-radius: 0 0 25px 25px;
  }

  .tab {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;

    .left {
      padding: 30px;
      width: 48%;
      background: linear-gradient(to right, #fff, rgb(83, 185, 251));
      border-radius: 25px;
      display: flex;
      justify-content: space-between;

      > :first-child {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        > :first-child {
          font-size: 30px;
          font-weight: bold;
        }

        > :last-child {
          color: rgb(34, 167, 255);
        }
      }

      > :last-child img {
        width: 100px;
        height: 100%;
      }
    }
  }

  .title {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > :first-child {
      font-weight: bold;
      font-size: 30px;
    }

    > :last-child {
      color: #ccc;
    }
  }

  .list .text {
    font-size: 30px;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /*将对象作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 2;
      /*限制文本的行数，只显示3行*/
      -webkit-box-orient: vertical;
      /*设置或检索伸缩盒对象的子元素的排列方式 */
    }

    span {
      color: rgb(94, 154, 246);
      font-weight: 600;
      font-size: 30px;
    }

    :last-child {
      font-weight: 600;
      font-size: 40px;
    }
  }
}
</style>